<template>
    <div>
        <a-form :model="formState">
            <a-form-item label="Field A">
                <a-input v-model:value="formState.fieldA" placeholder="input placeholder" />
            </a-form-item>
            <a-form-item label="Select">
                <a-select>
                    <a-select-option value="demo">Demo</a-select-option>
                </a-select>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRaw } from 'vue';
import type { UnwrapRef } from 'vue';
interface FormState {
    layout: 'horizontal' | 'vertical' | 'inline';
    fieldA: string;
    fieldB: string;
}
const formState: UnwrapRef<FormState> = reactive({
    layout: 'horizontal',
    fieldA: '',
    fieldB: '',
});
</script>

<style scoped></style>